/* components/rank-list/rank-list.wxss */
@import "../../assets/css/theme.scss";
@import "../../assets/css/common.scss";
@mixin rankBg($index: 4) {
  background-image: url("https://game.shuguos.com/upload/img/rank" + $index + ".png");
}
.rank-page {
  position: relative;
  padding-top: 312rpx;
  width: 670rpx;
  height: 1169rpx;
  box-sizing: border-box;
  background-image: url("https://zsmatch.oss-cn-qingdao.aliyuncs.com/v3/20250327/rank.png");
  .tab-list {
    margin: 0 30rpx;

    .tab-item {
      text-align: center;
      position: relative;
      color: white;
      font-size: 30rpx;
      font-weight: bold;
      .icon-san {
        font-size: 20rpx;
        position: absolute;
        bottom: -18rpx;
        left: 50%;
        transform: translateX(-50%) rotate(-90deg);
      }
    }
    .tab-item-active {
      // color: #00a9fd;
    }
  }

  .rank-item {
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    color: white;
    margin-bottom: 13rpx;
    text-align: center;
    background: #4AAAF8;
    box-shadow: inset 0 -4rpx 0 0 #284DAF;
    border-radius: 40rpx;
    border: 2rpx solid #000000;

    .rank-left {
      width: 90rpx;
    }

    .rank-index {
      font-size: 32rpx;
      font-weight: bold;
    }
    .icon-rank {
      width: 70rpx;
      height: 45rpx;
    }
    .rank-name-con {
      padding-left: 60rpx;
      image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        margin-right: 14rpx;
        border: solid 2rpx red;
      }
      text {
        width: 150rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
      }
    }

    .rank-score {
      width: 100rpx;
    }
  }

  .my-rank {
    position: absolute;
    bottom: 0;
    left: -8rpx;
    right: -8rpx;
    box-sizing: border-box;
    padding: 15rpx 8rpx;
    background-color: #EBF6FF;
    border-radius: 0 0 24rpx 24rpx;
    .rank-item {
      background: #fff;
      box-shadow: inset 0 -4rpx 0 0 #aaa;
      border-radius: 40rpx;
      border: 2rpx solid #000000;
      height: 80rpx;
      color: $main-black;
      margin-bottom: 0;
    }
  }

  .rank-list {
    margin: 24rpx 58rpx 0;
    padding: 0 8rpx;
    background: #EBF6FF;
    border-radius: 24rpx;

    .list-name {
      text-align: center;
      color: #333333;
      font-size: 26rpx;
      line-height: 76rpx;
    }
    .scroll-rank {
      position: relative;
    }
    .scroll-rank-list {
      height: 560rpx;
      max-height: 560rpx;
      overflow-y: scroll;

      .bg-rank1 {
        background: #FF669A;
        box-shadow: inset 0 -4rpx 0 0 #B22468;
        border-radius: 40rpx;
        border: 2rpx solid #000000;
      }
      .bg-rank2 {
        background: #FFE314;
        box-shadow: inset 0 -4rpx 0 0 #E27F11;
        border-radius: 40rpx;
        border: 2rpx solid #000000;
      }
      .bg-rank3 {
        background: #44CC89;
        box-shadow: inset 0 -4rpx 0 0 #16806C;
        border-radius: 40rpx;
        border: 2rpx solid #000000;
      }
      .height-auto {
        height: 100rpx;
      }
      .bg-reword {
        // @include rankBg(4);
        background: #4AAAF8;
        box-shadow: inset 0 -4rpx 0 0 #284DAF;
        border-radius: 40rpx;
        border: 2rpx solid #000000;
      }
    }
  }

  .wechat-view {
    width: 201rpx;
    height: 68rpx;
    position: absolute;
    bottom: 104rpx;
    left: 210rpx;
    background-image: url("https://zsmatch.oss-cn-qingdao.aliyuncs.com/v3/20250318/common_info.png");
  }
}
.icon-close {
  margin-top: 20rpx;
  text-align: center;
  image {
    width: 53rpx;
    height: 53rpx;
    margin-top: 24rpx;
  }
}

.share-btn {
  width: 448rpx;
  box-sizing: border-box;
  height: 93rpx;
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  justify-content: center;
  padding-top: 24rpx;

  line-height: normal;
  background-color: transparent;
  text-align: center;
  margin: 90rpx auto 0;
  background: #FC6498;
  box-shadow: 0 8rpx 0 0 #B22468;
  border-radius: 46rpx;
}

.flex-full-1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.shop_name {
  width: 120rpx;
}
